<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home', name: '' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/topic', name: '' }"
        >首页话题</el-breadcrumb-item
      >
    </el-breadcrumb>

    <!-- body -->
    <el-card>
      <!-- header -->
      <div slot="header">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-input
              type="text"
              :rows="2"
              placeholder="输入话题名称创建"
              :maxlength="-1"
              :show-word-limit="false"
              :autosize="{ minRows: 2, maxRows: 4 }"
            />
          </el-col>

          <el-col :span="12" :offset="0">
            <el-button type="primary" size="default" @click="showCreate = true"
              >创建话题</el-button
            >
          </el-col>
        </el-row>
      </div>

      <!-- card body -->
      <el-table :data="list" border stripe highlight-current-row>
        <el-table-column label="#" type="index" />

        <el-table-column label="话题名称" prop="title"></el-table-column>

        <el-table-column label="背景图">
          <template scope="scope">
            <el-image
              :src="scope.row.imgs"
              fit="fill"
              :lazy="true"
              style="width: 120px"
            ></el-image>
          </template>
        </el-table-column>

        <el-table-column label="修改日期" prop="begin_date"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row justify="centere">
              <el-col :span="12">
                <el-button type="danger" size="small" @click="delBtnClick(scope.row)">删除</el-button>
              </el-col>

              <el-col :span="12">
                <el-button type="primary" size="small" @click="editBtnClick(scope.row)" >编辑</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 创建 -->
    <el-dialog title="创建话题" :visible.sync="showCreate" width="30%">
      <span></span>
      <el-form :model="form" :rules="submitRules" ref="form" label-width="80px" :inline="false" size="normal">
        <el-form-item label="话题每次" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="话题图片" prop="imgs">
          <el-input v-model="form.imgs"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="netAddTopic">创建</el-button>
          <el-button @click="showCreate = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <!-- 编辑 -->
    <el-dialog title="编辑话题" :visible.sync="showEdit" width="30%">
      <span></span>
      <el-form :model="currendTopic" ref="form2" label-width="80px" :inline="false" size="normal"
      >
        <el-form-item label="话题每次">
          <el-input v-model="currendTopic.title"></el-input>
        </el-form-item>
        <el-form-item label="话题图片">
          <el-input v-model="currendTopic.imgs"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="netUpdateTopic">保存</el-button>
          <el-button @click="showEdit = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>





<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
  mounted() {
    this.netFetchTopicList();
  },
  data() {
    return {
      form: {
        title: "",
        imgs: "",
      },

      submitRules:{
        title:[
          { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],
        imgs:[{required:true}],
      },


      showCreate: false,
      showEdit: false,
      currendTopic: {},
      list: [],
    };
  },

  methods: {
    async netFetchTopicList() {
      this.$http
        .get("/topic/list")
        .then(({ data }) => {
          this.list = data["data"];
        })
        .catch((err) => {
          debugger;
        });
    },

   netAddTopic() {
    this.$refs.form.validate(async (validate)=>{
      if (!validate) {
        return;
      }
      let {data} = await this.$http.post("/topic/add",this.form)
      let code = data.code
      if (code == 0) {
        this.$message.success(data.msg)
        this.form ={}
        this.netFetchTopicList()
      } else {
        this.$message.error(JSON.stringify(data.msg))
      }
      this.showCreate = false
  })

  },
  async netUpdateTopic(){
    let {data} = await this.$http.post("/topic/update",this.currendTopic)
      let code = data.code
     if (code == 0) {
        this.$message.success(data.msg)
        this.currendTopic ={}
        this.netFetchTopicList()
      } else {
        this.$message.error(JSON.stringify(data.msg))
      }
      this.showEdit = false
  },


    

    editBtnClick(data) {
      this.showEdit = true;
      this.currendTopic = data
    },

async delBtnClick(data) {
  let {tid} = data;
    let type =  await this.$confirm("确定删除","提示",{
    confirmButtonText:"删除",
    confirmCanselText:"取消",
    type:"error",
  }).catch(e=>{
    console.log("yes")
    return;
  })

  if (type == "confirm") {
    let {data} = await this.$http.post("/topic/del",{tid})
    let code = data.code
    if (code == 0) {
      this.$message.success(data.msg)
      this.netFetchTopicList()
    } else {
      this.$message.error(data.msg)
    }

  }

}



  },
};
</script>

<style scoped>
</style>